{% extends "base.html" %}
{% block title %}Case Analysis Result - AI Legal Assistant{% endblock %}

{% block extra_styles %}
<style>
.result-hero { background: var(--ink); color: #fff; border-radius: 16px; padding: 2rem; margin-bottom: 2rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.result-hero h2 { font-family: var(--font-display); color: #fff; }
.category-icon { font-size: 3rem; color: #6E96F5; }
.confidence-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.9rem; border-radius: 20px; font-size: 0.82rem; font-weight: 600; }
.conf-high { background: #dcfce7; color: #166534; }
.conf-medium { background: #fef3c7; color: #92400e; }
.conf-low { background: #fee2e2; color: #991b1b; }
.guidance-list { list-style: none; padding: 0; }
.guidance-list li { padding: 0.7rem 0; border-bottom: 1px solid var(--border); display: flex; gap: 0.7rem; align-items: flex-start; line-height: 1.6; }
.guidance-list li:last-child { border-bottom: none; }
.guidance-list li::before { content: "⚖️"; font-size: 1rem; flex-shrink: 0; margin-top: 0.1rem; }
.lawyer-score-bar { height: 6px; border-radius: 3px; background: var(--border); margin-top: 0.4rem; }
.lawyer-score-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--primary-light), var(--accent)); }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div style="margin-bottom:1.5rem;">
        <a href="/client/dashboard" class="btn btn-outline btn-sm"><i class="fas fa-arrow-left"></i> Back to Dashboard</a>
    </div>

    <!-- Result Hero -->
    <div class="result-hero">
        <div class="category-icon"><i class="fas fa-balance-scale"></i></div>
        <div>
            <div style="font-size:0.78rem;color:rgba(255,255,255,0.65);margin-bottom:0.3rem;font-family:var(--font-mono);letter-spacing:0.08em;text-transform:uppercase;">Case #{{ case.id }} · AI analysis complete</div>
            <h2 style="font-size:1.8rem;margin-bottom:0.4rem;">{{ case.category }}</h2>
            <span class="confidence-pill conf-{{ analysis.confidence|lower }}">
                <i class="fas fa-signal"></i> {{ analysis.confidence }} Confidence
            </span>
        </div>
    </div>

    <div class="grid-2" style="margin-bottom:2rem;">
        <!-- Summary -->
        <div class="card">
            <div class="card-header"><i class="fas fa-file-alt"></i> Case Summary</div>
            <div class="card-body">
                <p style="line-height:1.8;color:var(--text);">{{ case.summary }}</p>
            </div>
        </div>

        <!-- Legal Guidance -->
        <div class="card">
            <div class="card-header"><i class="fas fa-gavel"></i> Legal Guidance</div>
            <div class="card-body">
                <ul class="guidance-list">
                    {% for line in case.legal_guidance.split('\n') %}
                    {% if line.strip() %}
                    <li>{{ line.strip().lstrip('•-').strip() }}</li>
                    {% endif %}
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>

    <!-- Lawyer Recommendations -->
    {% if recommendations %}
    <div class="card">
        <div class="card-header"><i class="fas fa-user-tie"></i> Recommended Lawyers for {{ case.category }}</div>
        <div class="card-body">
            <div class="grid-2">
                {% for rec in recommendations %}
                {% set lawyer = rec.lawyer %}
                <div class="lawyer-card">
                    <div style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:0.5rem;">
                        <div>
                            <div class="lawyer-name">{{ lawyer.name }}</div>
                            <div class="lawyer-firm">{{ lawyer.law_firm_name }}</div>
                        </div>
                        <span class="badge badge-primary">{{ lawyer.specialization }}</span>
                    </div>
                    <div class="lawyer-meta">
                        <span><i class="fas fa-map-marker-alt"></i> {{ lawyer.city }}</span>
                        <span><i class="fas fa-briefcase"></i> {{ lawyer.experience_years }} yrs</span>
                        <span class="stars">{{ '★' * (lawyer.rating|int) }}{{ '☆' * (5 - lawyer.rating|int) }}</span>
                        <span>{{ lawyer.rating }}/5</span>
                        <span><i class="fas fa-chart-line"></i> {{ lawyer.success_rate_percentage }}% success</span>
                        <span><i class="fas fa-money-bill"></i> PKR {{ "{:,.0f}".format(lawyer.consultation_fee_pkr) }}</span>
                    </div>
                    <div class="lawyer-score-bar">
                        <div class="lawyer-score-fill" style="width:{{ [rec.match_score, 100]|min }}%;"></div>
                    </div>
                    <div style="display:flex;justify-content:space-between;align-items:center;margin-top:0.8rem;flex-wrap:wrap;gap:0.5rem;">
                        <small style="color:var(--text-muted);font-size:0.78rem;">{{ rec.reason }}</small>
                        <a href="/client/book-appointment/{{ lawyer.id }}?case_id={{ case.id }}" class="btn btn-primary btn-sm">
                            <i class="fas fa-calendar-plus"></i> Book
                        </a>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Actions -->
    <div style="display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.5rem;">
        <a href="/client/submit-case" class="btn btn-outline"><i class="fas fa-plus"></i> Submit Another Case</a>
        <a href="/client/lawyers" class="btn btn-outline"><i class="fas fa-users"></i> Browse All Lawyers</a>
        <a href="/client/chatbot" class="btn btn-outline"><i class="fas fa-robot"></i> Ask Follow-up Questions</a>
    </div>
</div>
{% endblock %}